<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">超级会员</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 会员状态卡片 -->
			<div class="member-status-card" v-if="memberInfo">
				<div class="status-header">
					<i class="material-icons">stars</i>
					<h2>会员状态</h2>
				</div>
				<div class="status-content" v-if="isValidMember">
					<div class="status-badge active">
						<i class="material-icons">check_circle</i>
						<span>超级会员</span>
					</div>
					<p class="expire-time">到期时间：{{ formatTime(memberInfo.superMemberExpireTime) }}</p>
					<p class="benefits">享受积分和经验值双倍累计权益</p>
					<!-- 续费入口：已是会员时可以手动展开续费套餐 -->
					<div class="renew-entry">
						<button class="renew-button" @click="startRenew">
							<i class="material-icons">autorenew</i>
							<span>续费超级会员</span>
						</button>
					</div>
				</div>
				<div class="status-content" v-else>
					<div class="status-badge inactive">
						<i class="material-icons">cancel</i>
						<span>未开通</span>
					</div>
					<p class="benefits">开通后享受积分和经验值双倍累计权益</p>
				</div>
			</div>

			<!-- 会员套餐选择 -->
			<div class="plans-section" v-if="!isValidMember || showRenew">
				<h3 class="section-title">选择套餐</h3>
				<div class="plans-list">
					<div 
						class="plan-item" 
						:class="{ 'selected': selectedPlan === 1 }"
						@click="selectPlan(1)"
					>
						<div class="plan-header">
							<h4>1个月</h4>
							<div class="plan-price">
								<span class="price-symbol">¥</span>
								<span class="price-value">9.9</span>
							</div>
						</div>
						<p class="plan-desc">适合短期体验</p>
					</div>
					<div 
						class="plan-item" 
						:class="{ 'selected': selectedPlan === 12 }"
						@click="selectPlan(12)"
					>
						<div class="plan-header">
							<h4>1年</h4>
							<div class="plan-price">
								<span class="price-symbol">¥</span>
								<span class="price-value">69.9</span>
								<span class="price-tag">超值</span>
							</div>
						</div>
						<p class="plan-desc">平均每月仅需 ¥5.83</p>
					</div>
				</div>
			</div>

			<!-- 会员权益说明 -->
			<div class="benefits-section">
				<h3 class="section-title">会员权益</h3>
				<div class="benefits-list">
					<div class="benefit-item">
						<i class="material-icons">stars</i>
						<div class="benefit-content">
							<h4>双倍积分</h4>
							<p>每次支付成功可获得双倍积分</p>
						</div>
					</div>
					<div class="benefit-item">
						<i class="material-icons">trending_up</i>
						<div class="benefit-content">
							<h4>双倍经验值</h4>
							<p>每次支付成功可获得双倍经验值，更快升级</p>
						</div>
					</div>
					<div class="benefit-item">
						<i class="material-icons">card_giftcard</i>
						<div class="benefit-content">
							<h4>专属标识</h4>
							<p>个人资料显示超级会员专属标识</p>
						</div>
					</div>
				</div>
			</div>

			<!-- 购买/续费按钮 -->
			<div class="purchase-button-wrapper" v-if="!isValidMember || showRenew">
				<button 
					class="purchase-button" 
					@click="toPayment"
					:disabled="!selectedPlan"
				>
					<i class="material-icons">payment</i>
					<span>{{ isValidMember ? '续费' : '立即开通' }}</span>
				</button>
			</div>
		</div>

		<!-- 底部导航 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue'
	import BackButton from '../components/BackButton.vue'
	
	export default {
		name: 'SuperMember',
		data: function() {
			return {
				memberInfo: null,
				isValidMember: false,
				selectedPlan: null,
				showRenew: false
			}
		},
		components: {
			AppFooter,
			BackButton
		},
		created() {
			let user = this.$getSessionStorage('user');
			if (user == null) {
				this.$router.push('/login');
				return;
			}
			this.loadMemberStatus();
		},
		methods: {
			loadMemberStatus: function() {
				let user = this.$getSessionStorage('user');
				if (!user || !user.userId) {
					return;
				}
				
				this.$axios.post('SuperMemberController/status', this.$qs.stringify({
					userId: user.userId
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(resp => {
					if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
						this.memberInfo = resp.data.result || {};
						this.isValidMember = this.memberInfo.isSuperMember === 1 && 
							this.memberInfo.superMemberExpireTime && 
							new Date(this.memberInfo.superMemberExpireTime) > new Date();
					}
				})
				.catch(err => {
					console.error('加载会员状态失败:', err);
				});
			},
			// 点击“续费”时显示下方套餐选择与支付按钮
			startRenew: function() {
				this.showRenew = true;
				if (!this.selectedPlan) {
					this.selectedPlan = 1;
				}
			},
			selectPlan: function(duration) {
				this.selectedPlan = duration;
			},
			formatTime: function(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				});
			},
			toPayment: function() {
				if (!this.selectedPlan) {
					this.$toast?.error('请选择套餐');
					return;
				}
				
				let user = this.$getSessionStorage('user');
				if (!user || !user.userId) {
					this.$router.push('/login');
					return;
				}
				
				const price = this.selectedPlan === 1 ? 9.9 : 69.9;
				this.$router.push({
					path: '/superMemberPayment',
					query: {
						duration: this.selectedPlan,
						price: price
					}
				});
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		padding-bottom: 120px;
	}

	/* 会员状态卡片 */
	.member-status-card {
		background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%);
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(255, 107, 157, 0.3);
		padding: 24px;
		margin-bottom: 24px;
		color: white;
	}

	.status-header {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 20px;
	}

	.status-header i {
		font-size: 32px;
	}

	.status-header h2 {
		font-size: 24px;
		font-weight: 700;
		margin: 0;
	}

	.status-content {
		text-align: center;
	}

	.status-badge {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 20px;
		border-radius: 20px;
		margin-bottom: 16px;
		font-weight: 600;
	}

	.status-badge.active {
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(10px);
	}

	.status-badge.inactive {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
	}

	.status-badge i {
		font-size: 20px;
	}

	.expire-time {
		font-size: 16px;
		margin: 12px 0;
		opacity: 0.9;
	}

	.benefits {
		font-size: 14px;
		opacity: 0.8;
		margin: 8px 0 0 0;
	}

	/* 续费按钮区域（已是会员时显示） */
	.renew-entry {
		margin-top: 16px;
	}

	.renew-button {
		width: 100%;
		height: 46px;
		border: none;
		border-radius: 12px;
		background: linear-gradient(135deg, #FFE082 0%, #FFB300 100%);
		color: #333;
		font-size: 16px;
		font-weight: 600;
		outline: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transition: all 0.3s ease;
		background-clip: padding-box;
	}

	.renew-button i {
		font-size: 20px;
	}

	.renew-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0,0,0,0.2);
	}

	.renew-button:active {
		transform: translateY(0);
	}

	/* 套餐选择 */
	.plans-section {
		background: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		padding: 20px;
		margin-bottom: 24px;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin: 0 0 20px 0;
	}

	.plans-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.plan-item {
		padding: 20px;
		border: 2px solid #e0e0e0;
		border-radius: 12px;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.plan-item:hover {
		border-color: #FF6B9D;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
	}

	.plan-item.selected {
		border-color: #FF6B9D;
		background: linear-gradient(135deg, rgba(255, 107, 157, 0.1) 0%, rgba(196, 69, 105, 0.1) 100%);
		box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
	}

	.plan-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.plan-header h4 {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin: 0;
	}

	.plan-price {
		display: flex;
		align-items: baseline;
		gap: 4px;
	}

	.price-symbol {
		font-size: 16px;
		color: #FF6B9D;
		font-weight: 600;
	}

	.price-value {
		font-size: 28px;
		color: #FF6B9D;
		font-weight: 700;
	}

	.price-tag {
		background: #FF6B9D;
		color: white;
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 8px;
		margin-left: 8px;
		font-weight: 600;
	}

	.plan-desc {
		font-size: 14px;
		color: #666;
		margin: 0;
	}

	/* 权益说明 */
	.benefits-section {
		background: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		padding: 20px;
		margin-bottom: 24px;
	}

	.benefits-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.benefit-item {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		padding: 16px;
		background: #f9f9f9;
		border-radius: 12px;
	}

	.benefit-item i {
		font-size: 32px;
		color: #FF6B9D;
		flex-shrink: 0;
	}

	.benefit-content {
		flex: 1;
	}

	.benefit-content h4 {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin: 0 0 6px 0;
	}

	.benefit-content p {
		font-size: 14px;
		color: #666;
		margin: 0;
		line-height: 1.5;
	}

	/* 购买按钮 */
	.purchase-button-wrapper {
		padding: 0;
		margin-bottom: 20px;
	}

	.purchase-button {
		width: 100%;
		height: 50px;
		border: none;
		border-radius: 12px;
		background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%);
		color: white;
		font-size: 18px;
		font-weight: 600;
		outline: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
		transition: all 0.3s ease;
	}

	.purchase-button:hover:not(:disabled) {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(255, 107, 157, 0.5);
	}

	.purchase-button:active:not(:disabled) {
		transform: translateY(0);
	}

	.purchase-button:disabled {
		background: #ccc;
		cursor: not-allowed;
		box-shadow: none;
	}

	.purchase-button i {
		font-size: 20px;
	}
</style>

